<template>
    <div class="views" :style="styleColor">
        <!-- 企业风险 -->
        <div class="views_top">
            <div class="left">
                <img class="imgOne" src="@/assets/images/bigViewIMG/blue.png" alt="">
                <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
                <span>企业风险</span>
            </div>
            <div class="right">
                <div class="tabBtn" :class="active == '1' ? 'actived' : ''" @click="active = '1'">
                    异常企业
                </div>
                 <div class="tabBtn" :class="active == '2' ? 'actived' : ''" @click="active = '2'">
                    危险品相关企业
                </div>
                <div class="tabBtn" :class="active == '3' ? 'actived' : ''" @click="active = '3'">外部行政处罚</div>
            </div>
        </div>
        <one v-if="active=='1'"></one>
        <two v-if="active=='2'"></two>
        <three v-if="active=='3'"></three>
       
    </div>
</template>

<script>

import { mapGetters } from 'vuex'
import one from './components/one.vue'
import two from './components/two.vue'
import three from './components/three.vue'
export default {
    components:{
        one,three,two
    },
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    data() {
        return {
            options: {},
            active: '1',
            list:[],
         
        }
    },
    computed: {
        ...mapGetters(['customCode']),
        transStyle() {
            // console.log('??????????????????', this.objToOne(this.options))
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"

            }
        }
    },
    watch:{
      
        // customCode(val) {
        //     // console.log(val);
        //     this.getList(val)

        // },
    },
    mounted() {

        this.options = this.value
    },
    created(){
       
        // if (this.customCode == '' || !this.customCode) {
        //     this.getList('22')
        // } else {
        //     this.getList(this.customCode)
        // }   
    },
   

}
</script>

<style lang="scss" scoped>
.views_top {
    height: 40px;
    display: flex;

    .left {
        width: 180px;
        display: flex;
        align-items: center;

        .imgOne {
            width: 35px;
            height: 40px;
        }

        .imgTwo {
            width: 22px;
            height: 21px;
            margin-left: 10px;
        }

        span {
            color: #fff;
            font-size: 16px;
            margin-left: 8px;
        }
    }

    .right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.53);

        .tabBtn {
            width: 100px;
            height: 25px;
            font-size: 14px;
            border: 1px solid transparent;
            margin-left: 5px;
            line-height: 24px;
            border-radius: 5px;
            cursor: pointer;
        }

        .actived {
            border: 1px solid #00c1ff;
            color: #00c1ff;
        }

    }
}

</style>

